<script setup lang="ts">
import { ref, nextTick, computed } from 'vue'
import { onReady, onLoad } from '@dcloudio/uni-app'
import listItem from './components/listItem.vue'

// 渲染 Tab 界面
const activeIndex = ref(0)
const listItemRef = ref<any>()
onLoad(() => {
  listItemRef.value?.getRecordsList(date.value, typeValue.value)
})

const tabsList = ref<
  {
    title: string
    value: number
  }[]
>([
  { title: '全部', value: 0 },
  { title: '储值', value: 1 },
  { title: '消费', value: 2 },
])

// 选择日期和tab
const date = ref<string>('')
const typeValue = ref<number>(0)

// 切换日期
const bindDateChange = (e: any) => {
  date.value = e.detail.value
  listItemRef.value?.getRecordsList(date.value, typeValue.value)
}
// 格式化日期
const dateFormat = computed(() => {
  return !date.value ? '全部' : date.value.split('-').join('年') + '月'
})
// 切换tab
function handleChange(value: number, index: number) {
  activeIndex.value = index
  typeValue.value = value
  listItemRef.value?.getRecordsList(date.value, typeValue.value)
}

onReady(() => {
  nextTick(() => {
    if (listItemRef.value) {
      listItemRef.value?.getRecordsList(date.value, typeValue.value)
    }
  })
})
</script>

<template>
  <view class="listWrapper">
    <view class="navigationBar">
      <view
        class="_view"
        :class="{ active: index === activeIndex }"
        v-for="(item, index) in tabsList"
        :key="item.title"
        @click="handleChange(item.value, index)"
        >{{ item.title }}
        <text class="subscriptLine"></text>
      </view>
    </view>

    <picker mode="date" fields="month" class="custom-picker" :value="date" @change="bindDateChange">
      <view class="date">
        <view class="uni-input">{{ dateFormat }}</view>
        <text class="iconfont icon_arrow-left"></text>
      </view>
    </picker>
    <listItem ref="listItemRef" />
  </view>
</template>

<style lang="scss" scoped>
page {
  background-color: $uni-bg-color-grey;
  height: 100%;
}
.scroll_view {
  flex: 1;
  padding-bottom: 60rpx;
}
.listWrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: $uni-bg-color-grey;
  .navigationBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 36rpx 84rpx 0 84rpx;
    width: 100%;
    height: 96rpx;
    font-size: 28rpx;
    background-color: #fff;
    color: $uni-text-color-grey;
    ._view {
      position: relative;
      min-width: 136rpx;
      height: 60rpx;
      text-align: center;
    }
    .active {
      position: relative;
      color: #000;
      font-weight: bold;
      .subscriptLine {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 56rpx;
        border-bottom: 6rpx solid $uni-color-motif;
      }
    }
  }
  .date {
    display: flex;
    align-items: center;
    padding: 24rpx 0 22rpx 40rpx;
    .iconfont {
      margin-left: 10rpx;
      font-weight: bold;
      font-size: 24rpx;
    }
    color: rgba(0, 0, 0, 0.9);
    font-family: 'PingFang SC';
    font-size: 32rpx;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
}
/* 添加自定义的picker样式 */
.custom-picker {
  font-size: 28rpx;
}
</style>
